<template>
	<view>
		<!-- 整个蓝色部分 -->
		<view class="top">
			<!-- 搜索框那一行 -->
			<view class="top1">
				<view style="width: 580rpx;position: relative;">
					<uni-search-bar class="uni-mt-10" radius="100" placeholder="输入需要搜索的内容" clearButton="none"
						cancelButton="none" />
					<uni-icons type="search" size="20" @click="onSearch()" class="sousuo"></uni-icons>
				</view> 
				<!-- #ifdef H5 -->
				<view class="zu1" @click="changemoudle" style="padding-top: 32rpx;">
				<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="zu1" @click="changemoudle">
					<!-- #endif -->
						<!-- <image class="zu1image" src="/static/chengyuan.png" mode=""></image> -->
						<view style="width: 60rpx;"><text class="wenzi">{{moudle}}</text></view>
					</view>
				</view>
				<!-- 汽油型号 -->
				<view class="top1-2" v-if="moudle == '地图模式'">
					
				</view>
			</view>
			<view class="list" v-if="moudle == '地图模式'">
				<view class="listItem" v-for="(item,index) in filteredStations" :key="index" @click="goNearby(item)">
					<view>
						<image src="https://q3.itc.cn/images01/20240828/2c16f30d3b484e6898b638f86c006759.jpeg" mode="">
						</image>
					</view>
					<view>
						<view>{{item.title}}</view>
						<view class="address">{{item.address}}</view>
					</view>
					<view>
						<view>{{item._distance}}m</view>
						<view>
							<uni-icons color="#1d6fff" custom-prefix="custom-icon"
							type="paperplane-filled" size="20" @click="goNavigation(item)"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="top2" v-if="moudle == '列表模式'">
				<!-- 地图 -->
				<view class="top2-1">
					<view class="page-section page-section-gap" style="padding: 20rpx;border-radius: 30rpx;margin-top: 50rpx;">
						<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude"
							:markers="covers" :scale="15">
						</map>
					</view>
					<view>
						<button type="button" style="background-color: #3284fc;border-radius: 40rpx;color: aliceblue;margin-top: 20rpx;"
							@click="tiao">立即导航</button>
					</view>
				</view>
			</view>

		</view>

</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				moudle: '地图模式',
				title: 'map',
				latitude: '',
				longitude: '',
				gasStations: [],
				filteredStations: [],
				keyword: '',
				covers:[]
			}
		},
		onLoad(options) {
			if (options.gasStations) {
				this.filteredStations = this.gasStations = JSON.parse(decodeURIComponent(options.gasStations));
			}
			if (options.covers) {
				this.covers = JSON.parse(decodeURIComponent(options.covers));
			}
			this.getLocation();
		},
		methods: {
			getLocation() {
				// 使用腾讯地图的定位接口
				uni.request({
					url: 'https://apis.map.qq.com/ws/location/v1/ip', // 使用腾讯地图的定位接口（IP定位）
					data: {
						key: 'GZ3BZ-GIY67-NPZXM-H463Z-Q7NAE-UUFCU',
					},
					success: (res) => {
						if (res.data.status === 0) {
							const lat = res.data.result.location.lat;
							const lng = res.data.result.location.lng;
							this.latitude = lat;
							this.longitude = lng;
							uni.setStorage({
								key: "latitude",
								data: this.latitude
							})
							uni.setStorage({
								key: "longitude",
								data: this.longitude
							})
							let latitude = uni.getStorageSync('latitude');
						} else {
							console.error('定位失败:', res.data.message);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changemoudle() {
				this.moudle = this.moudle == '地图模式' ? '列表模式' : '地图模式'
			},
			searchGasStations(keyword, stations) {
				return stations.filter(station => {
					return station.title.toLowerCase().includes(keyword.toLowerCase());
				});
			},
			onSearch() {
				this.filteredStations = this.searchGasStations(this.keyword, this.gasStations);
			},
			goNavigation(e){
				uni.navigateTo({
					url: `/packageIndex/accurateNavigation/accurateNavigation?name=${e.category}&address=${e.address}&longitude=${e.location.lng}&latitude=${e.location.lat}`
				})
			},
			goNearby(e){
				uni.navigateTo({
					url: `/packageIndex/refuelNearby/refuelNearby?gasStations=`+encodeURIComponent(JSON
						.stringify(e))
				})
			}
		}
	}
</script>





<style>
	.top {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
	}

	.top1 {
		display: flex;
		flex-direction: row;
		/* padding-top: 20rpx; */
		justify-content: center;
	}
	.sousuo{
		position: absolute;
		top: 20rpx;
		right: 30rpx;
	}

	.wenzi {
		font-size: 25rpx;
		color: blue;
		/* position: relative; */
		top: -107rpx;
		left: 30rpx;
	}

	.zu1image {
		width: 110rpx;
		height: 110rpx;
	}

	.top1-2 {
		display: flex;
		flex-direction: row;
		/* justify-content: space-around; */
		
		position: relative;
		
	}

	.top1-2-1 {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.you {
		margin: 0rpx 8rpx;
		color: white;
		border: 2rpx solid #f7f7f7;
		border-radius: 15rpx;
		font-size: 28rpx;
	}


	.top2 {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.top2-1 {
		width: 90%;
		height: 100%;
		background-color: white;
		margin-bottom: 40rpx;
		border-radius: 30rpx;
		position: relative;
		top: -150rpx;
	}

	.top2-1-1 {
		width: 90%;
		height: 100%;
		background-color: white;
		padding: 30rpx;
		border-radius: 50rpx;
	}
	.list {
		padding: 20rpx 22rpx;
		/* margin-top: -170rpx; */
	}
	
	.list .listItem {
		display: flex;
		padding: 28rpx 32rpx;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 22rpx;
	}
	
	.list .listItem image {
		width: 200rpx;
		height: 132rpx;
		margin-right: 20rpx;
	}
	
	.list .listItem>view:nth-child(2)>view:nth-child(1) {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.list .listItem>view:nth-child(2)>view:nth-child(2) {
		font-size: 28rpx;
		margin-top: 46rpx;
		color: #6c6c6c;
	}
	
	.list .listItem>view:nth-child(3) {
		font-size: 22rpx;
		margin-top: 10rpx;
		color: #1d6fff;
		font-weight: bold;
	}
	
	.list .listItem>view:nth-child(3)>view:nth-child(2) {
		margin-top: 50rpx;
		padding-left: 30rpx;
	}
	.address {
		overflow: hidden;
		/* 超出的内容隐藏 */
		text-overflow: ellipsis;
		/* 以省略号...显示被修剪的文本 */
		display: -webkit-box;
		/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
		-webkit-box-orient: vertical;
		/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-line-clamp: 1;
		/* 设置显示的行数 */
	}
	.top2 {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin-top: -150rpx;
	}
	
	.top2-1 {
		width: 90%;
		height: 100%;
		background-color: white;
		margin-bottom: 40rpx;
		border-radius: 30rpx;
		position: relative;
		padding-top: 200rpx;
	}
	
	.top2-1-1 {
		width: 90%;
		height: 100%;
		background-color: white;
		padding: 30rpx;
		border-radius: 50rpx;
	}
	.xiangxiphoto {
		width: 250rpx;
		border-radius: 18rpx;
	}
</style>